

<!DOCTYPE html>
<html lang="en" >

<head>

    <meta charset="UTF-8">

    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
    <meta name="apple-mobile-web-app-title" content="CodePen">

    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

    <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


    <title>CodePen - App Menu With Lock Screen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">



    <style>
        /* -- */
        @keyframes blink {
            from, 25%, to {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
        }
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(720deg);
            }
            to {
                transform: rotate(1440deg);
            }
        }
        @keyframes bounce {
            from, 6.66%, 17.66%, 33.33% {
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transform: translate3d(0, 0, 0);
            }
            13.33%, 14.33% {
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -30px, 0) scaleY(1.1);
            }
            23.33% {
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -15px, 0) scaleY(1.05);
            }
            26.66% {
                transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transform: translate3d(0, 0, 0) scaleY(0.95);
            }
            30% {
                transform: translate3d(0, -4px, 0) scaleY(1.02);
            }
        }
        body {
            margin: 0px;
            overflow-x: hidden;
            padding: 0px;
        }
        body::-webkit-scrollbar-track {
            background-color: #1e1e1e;
        }
        body::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 100px;
        }
        body::-webkit-scrollbar {
            height: 4px;
            width: 4px;
        }
        body input, body h1, body h3, body a, body span {
            color: #5a5a5a;
            font-family: "Rubik", sans-serif;
            font-weight: 400;
            margin: 0px;
            padding: 0px;
        }

        .background-image {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .clear-button {
            backdrop-filter: blur(3px);
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }
        .clear-button:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        #app {
            background-color: #1e1e1e;
        }
        #app.logged-out #app-info {
            margin-left: 40px;
            opacity: 1;
            transform: translateX(0%);
        }
        #app.logged-out #app-background {
            cursor: pointer;
        }
        #app.logged-out #sign-in-button-wrapper {
            opacity: 1;
            pointer-events: all;
            transform: translate(-50%, -40px);
        }
        #app.logging-in #app-background #app-background-image, #app.verifying-log-in #app-background #app-background-image, #app.log-in-error #app-background #app-background-image {
            filter: blur(8px);
            transform: scale(1.2);
        }
        #app.logging-in #app-pin-wrapper, #app.log-in-error #app-pin-wrapper {
            opacity: 1;
            pointer-events: all;
            transform: translate(-50%, -50%) scale(1);
        }
        #app.verifying-log-in #app-loading-icon {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
        #app.log-in-error #app-pin-wrapper #app-pin .app-pin-digit {
            background-color: rgba(239, 83, 80, 0.05);
            border-color: rgba(239, 83, 80, 0.5);
        }
        #app.logged-in #app-menu {
            height: auto;
            overflow: initial;
            opacity: 1;
            pointer-events: all;
            transform: translateY(0%);
        }
        #app .scrollable-component {
            cursor: grab;
            overflow: auto;
            user-select: none;
            width: 100%;
        }
        #app .scrollable-component:active {
            cursor: grabbing;
        }
        #app .scrollable-component::-webkit-scrollbar {
            height: 0px;
            width: 0px;
        }
        #app #app-loading-icon {
            left: 50%;
            opacity: 0;
            pointer-events: none;
            position: absolute;
            top: 50%;
            transform: translate(-50%, 0%);
            transition: opacity 250ms, transform 250ms;
            z-index: 2;
        }
        #app #app-loading-icon i {
            animation: 2s spin ease-in-out infinite;
            color: white;
            font-size: 2em;
        }
        #app #app-background {
            height: 100%;
            left: 0px;
            overflow: hidden;
            position: fixed;
            top: 0px;
            width: 100%;
            z-index: 1;
        }
        #app #app-background #app-background-image {
            background-image: url("https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80");
            height: 100%;
            transition: filter 250ms, transform 250ms;
            width: 100%;
        }
        #app #app-info {
            bottom: 0px;
            left: 0px;
            margin: 40px;
            margin-left: 0px;
            opacity: 0;
            position: absolute;
            transform: translateX(-100%);
            transition: margin 250ms, opacity 250ms, transform 250ms;
            z-index: 2;
        }
        #app .user-status-button {
            cursor: pointer;
            margin-top: 10px;
            outline: none;
            padding: 10px;
            width: 100px;
        }
        #app .user-status-button i {
            color: whitesmoke;
            font-size: 1.25em;
        }
        #app #sign-in-button-wrapper {
            bottom: 0px;
            left: 50%;
            opacity: 0;
            pointer-events: none;
            position: absolute;
            transform: translate(-50%, 40px);
            transition: opacity 250ms, transform 250ms;
            z-index: 2;
        }
        #app #sign-in-button-wrapper #sign-in-button:not(:hover) {
            animation: bounce 3s infinite;
            animation-delay: 3s;
        }
        #app .info {
            align-items: flex-end;
            display: flex;
        }
        #app .info .time {
            color: whitesmoke;
            font-size: 6em;
            height: 80px;
            line-height: 80px;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
        }
        #app .info .weather {
            display: inline-flex;
            height: 20px;
            margin-bottom: 6px;
            margin-left: 20px;
        }
        #app .info .weather i, #app .info .weather span {
            align-items: center;
            display: inline-flex;
        }
        #app .info .weather i {
            color: #fdd835;
            font-size: 0.9em;
        }
        #app .info .weather span {
            color: white;
        }
        #app .info .weather .weather-type {
            height: 20px;
        }
        #app .info .weather .weather-temperature-value {
            font-size: 1.5em;
            height: 20px;
            margin-left: 5px;
        }
        #app .info .weather .weather-temperature-unit {
            align-items: flex-start;
            font-size: 0.8em;
            margin-left: 3px;
        }
        #app .reminder {
            display: flex;
            gap: 6px;
            margin-top: 10px;
        }
        #app .reminder i, #app .reminder div {
            display: inline-flex;
        }
        #app .reminder i {
            color: whitesmoke;
            font-size: 0.8em;
            height: 12px;
            line-height: 12px;
        }
        #app .reminder span {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1em;
        }
        #app .reminder .reminder-icon {
            align-items: center;
            height: 20px;
        }
        #app .reminder .reminder-time {
            align-items: flex-end;
            color: #1e1e1e;
            font-size: 0.8em;
            height: 20px;
        }
        #app #quick-nav {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            overflow: auto;
            padding-bottom: 5px;
            width: 100%;
            z-index: 3;
        }
        #app #quick-nav .quick-nav-item {
            padding: 10px 20px;
        }
        #app #quick-nav .quick-nav-item:last-of-type {
            margin-right: 10px;
        }
        #app #quick-nav .quick-nav-item .quick-nav-item-label {
            color: whitesmoke;
            text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
        }
        #app #youtube-link {
            align-items: center;
            display: inline-flex;
            gap: 5px;
            margin-top: 10px;
            padding: 10px 20px;
            text-decoration: none;
        }
        #app #youtube-link i, #app #youtube-link span {
            height: 20px;
            line-height: 20px;
        }
        #app #youtube-link i {
            color: #ef5350;
        }
        #app #youtube-link span {
            color: white;
        }
        #app .menu-section {
            margin-top: 60px;
        }
        #app .menu-section .menu-section-title {
            align-items: center;
            display: flex;
            gap: 6px;
        }
        #app .menu-section .menu-section-title i, #app .menu-section .menu-section-title span {
            color: whitesmoke;
        }
        #app .menu-section .menu-section-title i {
            font-size: 1em;
        }
        #app .menu-section .menu-section-title .menu-section-title-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.25em;
        }
        #app .menu-section .menu-section-content {
            margin-top: 15px;
            padding-top: 5px;
        }
        #app #restaurants-section .menu-section-content {
            display: flex;
            gap: 1em;
        }
        #app #restaurants-section .menu-section-content .restaurant-card {
            border-radius: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            height: 14vw;
            max-height: 240px;
            position: relative;
            transition: transform 250ms;
            width: 25%;
        }
        #app #restaurants-section .menu-section-content .restaurant-card:hover {
            transform: translateY(-5px);
        }
        #app #restaurants-section .menu-section-content .restaurant-card:hover .restaurant-card-content .restaurant-card-content-items {
            margin-bottom: 30px;
        }
        #app #restaurants-section .menu-section-content .restaurant-card .restaurant-card-content {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            border-radius: 10px;
            height: 100%;
            width: 100%;
        }
        #app #restaurants-section .menu-section-content .restaurant-card .restaurant-card-content .restaurant-card-content-items {
            bottom: 0px;
            display: flex;
            flex-direction: column;
            margin: 20px;
            position: absolute;
            right: 0px;
            text-align: right;
            transition: margin 250ms;
        }
        #app #restaurants-section .menu-section-content .restaurant-card .restaurant-card-content .restaurant-card-content-items .restaurant-card-title {
            color: whitesmoke;
            font-size: 1.5em;
        }
        #app #restaurants-section .menu-section-content .restaurant-card .restaurant-card-content .restaurant-card-content-items .restaurant-card-desc {
            color: #42a5f5;
            font-size: 0.9em;
        }
        #app #weather-section .menu-section-content {
            display: flex;
            gap: 1em;
            padding: 5px 0px;
            width: 100%;
        }
        #app #weather-section .menu-section-content .day-card {
            backdrop-filter: blur(3px);
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
            height: 8vw;
            max-height: 160px;
            min-height: 140px;
            min-width: 180px;
            position: relative;
            transition: transform 250ms;
            width: calc(100% / 7);
        }
        #app #weather-section .menu-section-content .day-card:last-of-type {
            margin-right: 5px;
        }
        #app #weather-section .menu-section-content .day-card .day-card-content {
            display: flex;
            flex-direction: column;
            height: calc(100% - 20px);
            justify-content: space-evenly;
            padding: 10px;
        }
        #app #weather-section .menu-section-content .day-card .day-card-content i, #app #weather-section .menu-section-content .day-card .day-card-content span {
            color: whitesmoke;
            text-align: center;
        }
        #app #weather-section .menu-section-content .day-card .day-card-content .day-weather-temperature {
            align-items: flex-start;
            display: flex;
            font-size: 0.9em;
            justify-content: center;
        }
        #app #weather-section .menu-section-content .day-card .day-card-content .day-weather-temperature .day-weather-temperature-unit {
            font-size: 0.8em;
            margin-left: 3px;
        }
        #app #weather-section .menu-section-content .day-card .day-card-content .day-weather-icon {
            font-size: 3.5em;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
        }
        #app #weather-section .menu-section-content .day-card .day-card-content .day-weather-icon.sunny {
            color: #fdd835;
        }
        #app #weather-section .menu-section-content .day-card .day-card-content .day-weather-icon.rainy, #app #weather-section .menu-section-content .day-card .day-card-content .day-weather-icon.stormy {
            color: #42a5f5;
        }
        #app #weather-section .menu-section-content .day-card .day-card-content .day-name {
            font-size: 0.9em;
            text-transform: uppercase;
        }
        #app #tools-section .menu-section-content {
            display: flex;
            gap: 1em;
        }
        #app #tools-section .menu-section-content .tool-card {
            background-color: #1e1e1e;
            border-radius: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            height: 8vw;
            max-height: 160px;
            min-height: 140px;
            overflow: hidden;
            position: relative;
            transition: transform 250ms;
            width: calc(100% / 6);
        }
        #app #tools-section .menu-section-content .tool-card:hover {
            transform: translateY(-5px);
        }
        #app #tools-section .menu-section-content .tool-card:hover .tool-card-background {
            filter: grayscale(25%);
        }
        #app #tools-section .menu-section-content .tool-card .tool-card-background {
            border-radius: 10px;
            filter: grayscale(100%);
            height: 100%;
            left: 0px;
            opacity: 0.5;
            position: absolute;
            top: 0px;
            transition: filter 250ms;
            width: 100%;
        }
        #app #tools-section .menu-section-content .tool-card .tool-card-content {
            background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            height: calc(100% - 40px);
            justify-content: space-between;
            padding: 20px;
            position: relative;
            width: calc(100% - 40px);
            z-index: 2;
        }
        #app #tools-section .menu-section-content .tool-card .tool-card-content .tool-card-content-header {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        #app #tools-section .menu-section-content .tool-card .tool-card-content .tool-card-content-header .tool-card-label {
            color: #42a5f5;
            font-size: 0.8em;
            text-transform: uppercase;
        }
        #app #tools-section .menu-section-content .tool-card .tool-card-content .tool-card-content-header .tool-card-name {
            color: whitesmoke;
            font-size: 1.25em;
        }
        #app #tools-section .menu-section-content .tool-card .tool-card-content .tool-card-icon {
            color: whitesmoke;
            font-size: 2em;
        }
        #app #movies-section .menu-section-content {
            display: flex;
            gap: 1em;
        }
        #app #movies-section .menu-section-content #movie-card-1 .movie-card-content {
            background: linear-gradient(to top, rgba(57, 73, 171, 0.4), transparent, rgba(0, 0, 0, 0.4));
        }
        #app #movies-section .menu-section-content #movie-card-2 .movie-card-content {
            background: linear-gradient(to top, rgba(103, 58, 183, 0.4), transparent, rgba(0, 0, 0, 0.4));
        }
        #app #movies-section .menu-section-content #movie-card-3 .movie-card-content {
            background: linear-gradient(to top, rgba(239, 83, 80, 0.4), transparent, rgba(0, 0, 0, 0.4));
        }
        #app #movies-section .menu-section-content #movie-card-4 .movie-card-content {
            background: linear-gradient(to top, rgba(42, 252, 152, 0.4), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
        }
        #app #movies-section .menu-section-content .movie-card {
            background-color: #1e1e1e;
            border-radius: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            height: 40vw;
            max-height: 600px;
            min-height: 460px;
            min-width: 260px;
            overflow: hidden;
            position: relative;
            transition: transform 250ms;
            width: calc(100% / 4);
        }
        #app #movies-section .menu-section-content .movie-card:hover {
            transform: translateY(-5px);
        }
        #app #movies-section .menu-section-content .movie-card:hover .movie-card-background {
            transform: scale(1.05);
        }
        #app #movies-section .menu-section-content .movie-card:hover .movie-card-content i {
            transform: translate(-20%, -20%) scale(1.2);
        }
        #app #movies-section .menu-section-content .movie-card .movie-card-background {
            border-radius: 10px;
            height: 100%;
            left: 0px;
            position: absolute;
            top: 0px;
            transition: transform 250ms;
            width: 100%;
            z-index: 1;
        }
        #app #movies-section .menu-section-content .movie-card .movie-card-content {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
            border-radius: 10px;
            height: 100%;
            position: relative;
            z-index: 2;
        }
        #app #movies-section .menu-section-content .movie-card .movie-card-content .movie-card-info {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 30px;
        }
        #app #movies-section .menu-section-content .movie-card .movie-card-content .movie-card-info span {
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
        }
        #app #movies-section .menu-section-content .movie-card .movie-card-content .movie-card-info .movie-card-title {
            color: whitesmoke;
            font-size: 2em;
        }
        #app #movies-section .menu-section-content .movie-card .movie-card-content .movie-card-info .movie-card-desc {
            color: #c8c8c8;
            font-size: 0.9em;
        }
        #app #movies-section .menu-section-content .movie-card .movie-card-content i {
            bottom: 0px;
            color: whitesmoke;
            font-size: 5em;
            padding: 30px;
            position: absolute;
            right: 0px;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
            transition: transform 250ms;
        }
        #app #app-pin-wrapper {
            left: 50%;
            opacity: 0;
            pointer-events: none;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -30%) scale(0.8);
            transition: opacity 250ms, transform 250ms;
            z-index: 2;
        }
        #app #app-pin-wrapper #app-pin-label {
            color: whitesmoke;
            font-size: 0.9em;
            margin: 10px;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
        }
        #app #app-pin-wrapper #app-pin-label #app-pin-cancel-text {
            cursor: pointer;
            margin-left: 2px;
        }
        #app #app-pin-wrapper #app-pin-label #app-pin-cancel-text:hover {
            text-decoration: underline;
        }
        #app #app-pin-wrapper #app-pin-label #app-pin-error-text {
            color: #ef5350;
        }
        #app #app-pin-wrapper #app-pin-hidden-input {
            background-color: transparent;
            border: none;
            height: 0px;
            outline: none;
            pointer-events: none;
            position: absolute;
            width: 0px;
        }
        #app #app-pin-wrapper #app-pin {
            display: flex;
            gap: 10px;
        }
        #app #app-pin-wrapper #app-pin .app-pin-digit {
            align-items: center;
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.06);
            display: inline-flex;
            font-size: 3em;
            height: 80px;
            justify-content: center;
            position: relative;
            transition: background-color 250ms, border-color 250ms;
            width: 60px;
        }
        #app #app-pin-wrapper #app-pin .app-pin-digit:after, #app #app-pin-wrapper #app-pin .app-pin-digit:before {
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.06);
            content: "";
            position: absolute;
            transition: opacity 250ms, transform 250ms;
            z-index: 2;
        }
        #app #app-pin-wrapper #app-pin .app-pin-digit:before {
            background-color: whitesmoke;
            border-radius: 10px;
            bottom: 0px;
            height: 3px;
            left: 15%;
            opacity: 0;
            transform: translateY(0px);
            width: 70%;
        }
        #app #app-pin-wrapper #app-pin .app-pin-digit:after {
            background-color: whitesmoke;
            border-radius: 20px;
            height: 20px;
            opacity: 0;
            transform: scale(0.25);
            width: 20px;
        }
        #app #app-pin-wrapper #app-pin .app-pin-digit.focused:before {
            animation: blink 2s ease-in-out infinite;
            opacity: 1;
            transform: translateY(-10px);
        }
        #app #app-pin-wrapper #app-pin .app-pin-digit.hidden:after {
            opacity: 1;
            transform: scale(1);
        }
        #app #app-pin-wrapper #app-pin .app-pin-digit.hidden .app-pin-digit-value {
            opacity: 0;
            transform: scale(0.25);
        }
        #app #app-pin-wrapper #app-pin .app-pin-digit .app-pin-digit-value {
            color: whitesmoke;
            transition: opacity 250ms, transform 250ms;
        }
        #app #app-menu {
            height: 100vh;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            position: relative;
            transform: translateY(-10%);
            transition: opacity 250ms, transform 250ms;
            z-index: 2;
        }
        #app #app-menu #app-menu-content-wrapper {
            background: linear-gradient(to bottom, transparent, #1e1e1e);
            margin-top: 30vh;
            min-height: 80vh;
            padding: 80px;
            padding-top: 0px;
        }
        #app #app-menu #app-menu-content-wrapper #app-menu-content {
            margin: auto;
            max-width: 1600px;
            position: relative;
        }
        #app #app-menu #app-menu-content-wrapper #app-menu-content #app-menu-content-header {
            display: flex;
            justify-content: space-between;
        }

        @media (max-width: 1300px) {
            #app.logged-out #sign-in-button-wrapper {
                transform: translate(-40px, 0px);
            }
            #app #sign-in-button-wrapper {
                bottom: 40px;
                left: auto;
                right: 0px;
                transform: translate(40px, 0px);
            }
            #app #app-menu #app-menu-content-wrapper {
                padding: 30px;
            }
            #app #app-menu #app-menu-content-wrapper #app-menu-content #restaurants-section .menu-section-content {
                flex-wrap: wrap;
            }
            #app #app-menu #app-menu-content-wrapper #app-menu-content #restaurants-section .menu-section-content .restaurant-card {
                height: 30vw;
                max-height: 300px;
                position: relative;
                width: calc(50% - 0.5em);
            }
            #app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content {
                flex-wrap: wrap;
            }
            #app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content .tool-card {
                width: calc(33.33% - 0.69em);
            }
        }
        @media (max-width: 600px) {
            #app .info .time {
                font-size: 4em;
                height: 60px;
                line-height: 60px;
            }
            #app .user-status-button {
                width: 60px;
            }
            #app #app-menu #app-menu-content-wrapper #app-menu-content #restaurants-section .menu-section-content {
                flex-direction: column;
            }
            #app #app-menu #app-menu-content-wrapper #app-menu-content #restaurants-section .menu-section-content .restaurant-card {
                height: 40vw;
                position: relative;
                width: 100%;
            }
            #app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content {
                flex-wrap: wrap;
            }
            #app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content .tool-card {
                width: calc(50% - 0.5em);
            }
        }
        @media (max-width: 400px) {
            #app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content {
                flex-wrap: wrap;
            }
            #app #app-menu #app-menu-content-wrapper #app-menu-content #tools-section .menu-section-content .tool-card {
                width: 100%;
            }
        }
    </style>

    <script>
        window.console = window.console || function(t) {};
    </script>



    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>


</head>

<body translate="no" >
<div id="root"></div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

<script src='https://unpkg.com/react@17/umd/react.development.js'></script>
<script src='https://unpkg.com/react-dom@17/umd/react-dom.development.js'></script>
<script src='https://unpkg.com/browse/@types/react@16.4.14/index.d.ts'></script>
<script src='https://unpkg.com/browse/@types/react-dom@17.0.2/index.d.ts'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.3.1/index.min.js'></script>
<script src='https://codepen.io/Hyperplexed/pen/xxYJYjM/54407644e24173ad6019b766443bf2a6.js'></script>
<script id="rendered-js" >
    "use strict";
    var UserStatus;
    (function (UserStatus) {
        UserStatus["LoggedIn"] = "Logged In";
        UserStatus["LoggingIn"] = "Logging In";
        UserStatus["LoggedOut"] = "Logged Out";
        UserStatus["LogInError"] = "Log In Error";
        UserStatus["VerifyingLogIn"] = "Verifying Log In";
    })(UserStatus || (UserStatus = {}));
    var Default;
    (function (Default) {
        Default["PIN"] = "1234";
    })(Default || (Default = {}));
    var WeatherType;
    (function (WeatherType) {
        WeatherType["Cloudy"] = "Cloudy";
        WeatherType["Rainy"] = "Rainy";
        WeatherType["Stormy"] = "Stormy";
        WeatherType["Sunny"] = "Sunny";
    })(WeatherType || (WeatherType = {}));
    const defaultPosition = () => ({
        left: 0,
        x: 0
    });
    const N = {
        clamp: (min, value, max) => Math.min(Math.max(min, value), max),
        rand: (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
    };
    const T = {
        format: (date) => {
            const hours = T.formatHours(date.getHours()), minutes = date.getMinutes(), seconds = date.getSeconds();
            return `${hours}:${T.formatSegment(minutes)}`;
        },
        formatHours: (hours) => {
            return hours % 12 === 0 ? 12 : hours % 12;
        },
        formatSegment: (segment) => {
            return segment < 10 ? `0${segment}` : segment;
        }
    };
    const LogInUtility = {
        verify: async (pin) => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    if (pin === Default.PIN) {
                        resolve(true);
                    }
                    else {
                        reject(`Invalid pin: ${pin}`);
                    }
                }, N.rand(300, 700));
            });
        }
    };
    const useCurrentDateEffect = () => {
        const [date, setDate] = React.useState(new Date());
        React.useEffect(() => {
            const interval = setInterval(() => {
                const update = new Date();
                if (update.getSeconds() !== date.getSeconds()) {
                    setDate(update);
                }
            }, 100);
            return () => clearInterval(interval);
        }, [date]);
        return date;
    };
    const ScrollableComponent = (props) => {
        const ref = React.useRef(null);
        const [state, setStateTo] = React.useState({
            grabbing: false,
            position: defaultPosition()
        });
        const handleOnMouseDown = (e) => {
            setStateTo(Object.assign(Object.assign({}, state), { grabbing: true, position: {
                    x: e.clientX,
                    left: ref.current.scrollLeft
                } }));
        };
        const handleOnMouseMove = (e) => {
            if (state.grabbing) {
                const left = Math.max(0, state.position.left + (state.position.x - e.clientX));
                ref.current.scrollLeft = left;
            }
        };
        const handleOnMouseUp = () => {
            if (state.grabbing) {
                setStateTo(Object.assign(Object.assign({}, state), { grabbing: false }));
            }
        };
        return (React.createElement("div", { ref: ref, className: classNames("scrollable-component", props.className), id: props.id, onMouseDown: handleOnMouseDown, onMouseMove: handleOnMouseMove, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseUp }, props.children));
    };
    const WeatherSnap = () => {
        const [temperature] = React.useState(N.rand(65, 85));
        return (React.createElement("span", { className: "weather" },
            React.createElement("i", { className: "weather-type", className: "fa-duotone fa-sun" }),
            React.createElement("span", { className: "weather-temperature-value" }, temperature),
            React.createElement("span", { className: "weather-temperature-unit" }, "\u00B0F")));
    };
    const Reminder = () => {
        return (React.createElement("div", { className: "reminder" },
            React.createElement("div", { className: "reminder-icon" },
                React.createElement("i", { className: "fa-regular fa-bell" })),
            React.createElement("span", { className: "reminder-text" },
                "Extra cool people meeting ",
                React.createElement("span", { className: "reminder-time" }, "10AM"))));
    };
    const Time = () => {
        const date = useCurrentDateEffect();
        return (React.createElement("span", { className: "time" }, T.format(date)));
    };
    const Info = (props) => {
        return (React.createElement("div", { id: props.id, className: "info" },
            React.createElement(Time, null),
            React.createElement(WeatherSnap, null)));
    };
    const PinDigit = (props) => {
        const [hidden, setHiddenTo] = React.useState(false);
        React.useEffect(() => {
            if (props.value) {
                const timeout = setTimeout(() => {
                    setHiddenTo(true);
                }, 500);
                return () => {
                    setHiddenTo(false);
                    clearTimeout(timeout);
                };
            }
        }, [props.value]);
        return (React.createElement("div", { className: classNames("app-pin-digit", { focused: props.focused, hidden }) },
            React.createElement("span", { className: "app-pin-digit-value" }, props.value || "")));
    };
    const Pin = () => {
        const { userStatus, setUserStatusTo } = React.useContext(AppContext);
        const [pin, setPinTo] = React.useState("");
        const ref = React.useRef(null);
        React.useEffect(() => {
            if (userStatus === UserStatus.LoggingIn || userStatus === UserStatus.LogInError) {
                ref.current.focus();
            }
            else {
                setPinTo("");
            }
        }, [userStatus]);
        React.useEffect(() => {
            if (pin.length === 4) {
                const verify = async () => {
                    try {
                        setUserStatusTo(UserStatus.VerifyingLogIn);
                        if (await LogInUtility.verify(pin)) {
                            setUserStatusTo(UserStatus.LoggedIn);
                        }
                    }
                    catch (err) {
                        console.error(err);
                        setUserStatusTo(UserStatus.LogInError);
                    }
                };
                verify();
            }
            if (userStatus === UserStatus.LogInError) {
                setUserStatusTo(UserStatus.LoggingIn);
            }
        }, [pin]);
        const handleOnClick = () => {
            ref.current.focus();
        };
        const handleOnCancel = () => {
            setUserStatusTo(UserStatus.LoggedOut);
        };
        const handleOnChange = (e) => {
            if (e.target.value.length <= 4) {
                setPinTo(e.target.value.toString());
            }
        };
        const getCancelText = () => {
            return (React.createElement("span", { id: "app-pin-cancel-text", onClick: handleOnCancel }, "Cancel"));
        };
        const getErrorText = () => {
            if (userStatus === UserStatus.LogInError) {
                return (React.createElement("span", { id: "app-pin-error-text" }, "Invalid"));
            }
        };
        return (React.createElement("div", { id: "app-pin-wrapper" },
            React.createElement("input", { disabled: userStatus !== UserStatus.LoggingIn && userStatus !== UserStatus.LogInError, id: "app-pin-hidden-input", maxLength: 4, ref: ref, type: "number", value: pin, onChange: handleOnChange }),
            React.createElement("div", { id: "app-pin", onClick: handleOnClick },
                React.createElement(PinDigit, { focused: pin.length === 0, value: pin[0] }),
                React.createElement(PinDigit, { focused: pin.length === 1, value: pin[1] }),
                React.createElement(PinDigit, { focused: pin.length === 2, value: pin[2] }),
                React.createElement(PinDigit, { focused: pin.length === 3, value: pin[3] })),
            React.createElement("h3", { id: "app-pin-label" },
                "Enter PIN (1234) ",
                getErrorText(),
                " ",
                getCancelText())));
    };
    const MenuSection = (props) => {
        const getContent = () => {
            if (props.scrollable) {
                return (React.createElement(ScrollableComponent, { className: "menu-section-content" }, props.children));
            }
            return (React.createElement("div", { className: "menu-section-content" }, props.children));
        };
        return (React.createElement("div", { id: props.id, className: "menu-section" },
            React.createElement("div", { className: "menu-section-title" },
                React.createElement("i", { className: props.icon }),
                React.createElement("span", { className: "menu-section-title-text" }, props.title)),
            getContent()));
    };
    const QuickNav = () => {
        const getItems = () => {
            return [{
                id: 1,
                label: "Weather"
            }, {
                id: 2,
                label: "Food"
            }, {
                id: 3,
                label: "Apps"
            }, {
                id: 4,
                label: "Movies"
            }].map((item) => {
                return (React.createElement("div", { key: item.id, className: "quick-nav-item clear-button" },
                    React.createElement("span", { className: "quick-nav-item-label" }, item.label)));
            });
        };
        return (React.createElement(ScrollableComponent, { id: "quick-nav" }, getItems()));
    };
    const Weather = () => {
        const getDays = () => {
            return [{
                id: 1,
                name: "Mon",
                temperature: N.rand(60, 80),
                weather: WeatherType.Sunny
            }, {
                id: 2,
                name: "Tues",
                temperature: N.rand(60, 80),
                weather: WeatherType.Sunny
            }, {
                id: 3,
                name: "Wed",
                temperature: N.rand(60, 80),
                weather: WeatherType.Cloudy
            }, {
                id: 4,
                name: "Thurs",
                temperature: N.rand(60, 80),
                weather: WeatherType.Rainy
            }, {
                id: 5,
                name: "Fri",
                temperature: N.rand(60, 80),
                weather: WeatherType.Stormy
            }, {
                id: 6,
                name: "Sat",
                temperature: N.rand(60, 80),
                weather: WeatherType.Sunny
            }, {
                id: 7,
                name: "Sun",
                temperature: N.rand(60, 80),
                weather: WeatherType.Cloudy
            }].map((day) => {
                const getIcon = () => {
                    switch (day.weather) {
                        case WeatherType.Cloudy:
                            return "fa-duotone fa-clouds";
                        case WeatherType.Rainy:
                            return "fa-duotone fa-cloud-drizzle";
                        case WeatherType.Stormy:
                            return "fa-duotone fa-cloud-bolt";
                        case WeatherType.Sunny:
                            return "fa-duotone fa-sun";
                    }
                };
                return (React.createElement("div", { key: day.id, className: "day-card" },
                    React.createElement("div", { className: "day-card-content" },
                        React.createElement("span", { className: "day-weather-temperature" },
                            day.temperature,
                            React.createElement("span", { className: "day-weather-temperature-unit" }, "\u00B0F")),
                        React.createElement("i", { className: classNames("day-weather-icon", getIcon(), day.weather.toLowerCase()) }),
                        React.createElement("span", { className: "day-name" }, day.name))));
            });
        };
        return (React.createElement(MenuSection, { icon: "fa-solid fa-sun", id: "weather-section", scrollable: true, title: "How's it look out there?" }, getDays()));
    };
    const Tools = () => {
        const getTools = () => {
            return [{
                icon: "fa-solid fa-cloud-sun",
                id: 1,
                image: "https://images.unsplash.com/photo-1492011221367-f47e3ccd77a0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fHdlYXRoZXJ8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
                label: "Weather",
                name: "Cloudly"
            }, {
                icon: "fa-solid fa-calculator-simple",
                id: 2,
                image: "https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
                label: "Calc",
                name: "Mathio"
            }, {
                icon: "fa-solid fa-piggy-bank",
                id: 3,
                image: "https://images.unsplash.com/photo-1579621970588-a35d0e7ab9b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8YmFua3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
                label: "Bank",
                name: "Cashy"
            }, {
                icon: "fa-solid fa-plane",
                id: 4,
                image: "https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YWlycGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
                label: "Travel",
                name: "Fly-er-io-ly"
            }, {
                icon: "fa-solid fa-gamepad-modern",
                id: 5,
                image: "https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8dmlkZW8lMjBnYW1lc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
                label: "Games",
                name: "Gamey"
            }, {
                icon: "fa-solid fa-video",
                id: 6,
                image: "https://images.unsplash.com/photo-1578022761797-b8636ac1773c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHZpZGVvJTIwY2hhdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
                label: "Video Chat",
                name: "Chatty"
            }].map((tool) => {
                const styles = {
                    backgroundImage: `url(${tool.image})`
                };
                return (React.createElement("div", { key: tool.id, className: "tool-card" },
                    React.createElement("div", { className: "tool-card-background background-image", style: styles }),
                    React.createElement("div", { className: "tool-card-content" },
                        React.createElement("div", { className: "tool-card-content-header" },
                            React.createElement("span", { className: "tool-card-label" }, tool.label),
                            React.createElement("span", { className: "tool-card-name" }, tool.name)),
                        React.createElement("i", { className: classNames(tool.icon, "tool-card-icon") }))));
            });
        };
        return (React.createElement(MenuSection, { icon: "fa-solid fa-toolbox", id: "tools-section", title: "What's Appening?" }, getTools()));
    };
    const Restaurants = () => {
        const getRestaurants = () => {
            return [{
                desc: "The best burgers in town",
                id: 1,
                image: "https://images.unsplash.com/photo-1606131731446-5568d87113aa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YnVyZ2Vyc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
                title: "Burgers"
            }, {
                desc: "The worst ice-cream around",
                id: 2,
                image: "https://images.unsplash.com/photo-1576506295286-5cda18df43e7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8aWNlJTIwY3JlYW18ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
                title: "Ice Cream"
            }, {
                desc: "This 'Za be gettin down",
                id: 3,
                image: "https://images.unsplash.com/photo-1590947132387-155cc02f3212?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cGl6emF8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
                title: "Pizza"
            }, {
                desc: "BBQ ain't need no rhyme",
                id: 4,
                image: "https://images.unsplash.com/photo-1529193591184-b1d58069ecdd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8YmFyYmVxdWV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
                title: "BBQ"
            }].map((restaurant) => {
                const styles = {
                    backgroundImage: `url(${restaurant.image})`
                };
                return (React.createElement("div", { key: restaurant.id, className: "restaurant-card background-image", style: styles },
                    React.createElement("div", { className: "restaurant-card-content" },
                        React.createElement("div", { className: "restaurant-card-content-items" },
                            React.createElement("span", { className: "restaurant-card-title" }, restaurant.title),
                            React.createElement("span", { className: "restaurant-card-desc" }, restaurant.desc)))));
            });
        };
        return (React.createElement(MenuSection, { icon: "fa-regular fa-pot-food", id: "restaurants-section", title: "Get it delivered!" }, getRestaurants()));
    };
    const Movies = () => {
        const getMovies = () => {
            return [{
                desc: "A tale of some people watching over a large portion of space.",
                id: 1,
                icon: "fa-solid fa-galaxy",
                image: "https://images.unsplash.com/photo-1596727147705-61a532a659bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFydmVsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
                title: "Protectors of the Milky Way"
            }, {
                desc: "Some people leave their holes to disrupt some things.",
                id: 2,
                icon: "fa-solid fa-hat-wizard",
                image: "https://images.unsplash.com/photo-1535666669445-e8c15cd2e7d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bG9yZCUyMG9mJTIwdGhlJTIwcmluZ3N8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
                title: "Hole People"
            }, {
                desc: "A boy with a dent in his head tries to stop a bad guy. And by bad I mean bad at winning.",
                id: 3,
                icon: "fa-solid fa-broom-ball",
                image: "https://images.unsplash.com/photo-1632266484284-a11d9e3a460a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGhhcnJ5JTIwcG90dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
                title: "Pot of Hair"
            }, {
                desc: "A long drawn out story of some people fighting over some space. Cuz there isn't enough of it.",
                id: 4,
                icon: "fa-solid fa-starship-freighter",
                image: "https://images.unsplash.com/photo-1533613220915-609f661a6fe1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c3RhciUyMHdhcnN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
                title: "Area Fights"
            }].map((movie) => {
                const styles = {
                    backgroundImage: `url(${movie.image})`
                };
                const id = `movie-card-${movie.id}`;
                return (React.createElement("div", { key: movie.id, id: id, className: "movie-card" },
                    React.createElement("div", { className: "movie-card-background background-image", style: styles }),
                    React.createElement("div", { className: "movie-card-content" },
                        React.createElement("div", { className: "movie-card-info" },
                            React.createElement("span", { className: "movie-card-title" }, movie.title),
                            React.createElement("span", { className: "movie-card-desc" }, movie.desc)),
                        React.createElement("i", { className: movie.icon }))));
            });
        };
        return (React.createElement(MenuSection, { icon: "fa-solid fa-camera-movie", id: "movies-section", scrollable: true, title: "Popcorn time!" }, getMovies()));
    };
    const UserStatusButton = (props) => {
        const { userStatus, setUserStatusTo } = React.useContext(AppContext);
        const handleOnClick = () => {
            setUserStatusTo(props.userStatus);
        };
        return (React.createElement("button", { id: props.id, className: "user-status-button clear-button", disabled: userStatus === props.userStatus, type: "button", onClick: handleOnClick },
            React.createElement("i", { className: props.icon })));
    };
    const Menu = () => {
        return (React.createElement("div", { id: "app-menu" },
            React.createElement("div", { id: "app-menu-content-wrapper" },
                React.createElement("div", { id: "app-menu-content" },
                    React.createElement("div", { id: "app-menu-content-header" },
                        React.createElement("div", { className: "app-menu-content-header-section" },
                            React.createElement(Info, { id: "app-menu-info" }),
                            React.createElement(Reminder, null)),
                        React.createElement("div", { className: "app-menu-content-header-section" },
                            React.createElement(UserStatusButton, { icon: "fa-solid fa-arrow-right-from-arc", id: "sign-out-button", userStatus: UserStatus.LoggedOut }))),
                    React.createElement(QuickNav, null),
                    React.createElement("a", { id: "youtube-link", className: "clear-button", href: "https://www.youtube.com/c/Hyperplexed", target: "_blank" },
                        React.createElement("i", { className: "fa-brands fa-youtube" }),
                        React.createElement("span", null, "Hyperplexed")),
                    React.createElement(Weather, null),
                    React.createElement(Restaurants, null),
                    React.createElement(Tools, null),
                    React.createElement(Movies, null)))));
    };
    const Background = () => {
        const { userStatus, setUserStatusTo } = React.useContext(AppContext);
        const handleOnClick = () => {
            if (userStatus === UserStatus.LoggedOut) {
                setUserStatusTo(UserStatus.LoggingIn);
            }
        };
        return (React.createElement("div", { id: "app-background", onClick: handleOnClick },
            React.createElement("div", { id: "app-background-image", className: "background-image" })));
    };
    const Loading = () => {
        return (React.createElement("div", { id: "app-loading-icon" },
            React.createElement("i", { className: "fa-solid fa-spinner-third" })));
    };
    const AppContext = React.createContext(null);
    const App = () => {
        const [userStatus, setUserStatusTo] = React.useState(UserStatus.LoggedOut);
        const getStatusClass = () => {
            return userStatus.replace(/\s+/g, "-").toLowerCase();
        };
        return (React.createElement(AppContext.Provider, { value: { userStatus, setUserStatusTo } },
            React.createElement("div", { id: "app", className: getStatusClass() },
                React.createElement(Info, { id: "app-info" }),
                React.createElement(Pin, null),
                React.createElement(Menu, null),
                React.createElement(Background, null),
                React.createElement("div", { id: "sign-in-button-wrapper" },
                    React.createElement(UserStatusButton, { icon: "fa-solid fa-arrow-right-to-arc", id: "sign-in-button", userStatus: UserStatus.LoggingIn })),
                React.createElement(Loading, null))));
    };
    ReactDOM.render(React.createElement(App, null), document.getElementById("root"));
    //# sourceURL=pen.js
</script>



</body>

</html>
 
